<template>
  <a-card :body-style="{ padding: '24px 48px' }" :bordered="false">
    <h3>迁移代价</h3>
    <a-form :form="form">
      <a-row :gutter="14">
        <a-col :span="6">
          <a-form-item
            label="迁移业务"
            :labelCol="{ span: 10 }"
            :wrapperCol="{ span: 14 }"
          >
            <a-select
              :getPopupContainer="
                triggerNode => {
                  return triggerNode.parentNode || document.body;
                }"
              placeholder="请选择数据中心"
              v-decorator="['datacenter', decoratorOptions.datacenter]"
            >
              <a-select-option
                v-for="d in datacenterList"
                :key="d.id"
                :value="d.id"
              >
                {{ d.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="4">
          <a-form-item>
            <a-select
              :getPopupContainer="
                triggerNode => {
                  return triggerNode.parentNode || document.body;
                }"
              :disabled="!form.getFieldValue('datacenter')"
              placeholder="请选择云平台资源"
              v-decorator="['resource', decoratorOptions.resource]"
            >
              <a-select-option
                v-for="d in cloudResourceList"
                :key="d.id"
                :value="d.id"
              >
                {{ d.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="4">
          <a-form-item>
            <a-select
              :getPopupContainer="
                triggerNode => {
                  return triggerNode.parentNode || document.body;
                }"
              :disabled="!form.getFieldValue('resource')"
              placeholder="请选择应用"
              v-decorator="['app', decoratorOptions.app]"
            >
              <a-select-option v-for="d in appList" :key="d.id" :value="d.id">
                {{ d.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="14">
        <a-col :span="6">
          <a-form-item
            label="迁移目标"
            :labelCol="{ span: 10 }"
            :wrapperCol="{ span: 14 }"
          >
            <a-select
              :getPopupContainer="
                triggerNode => {
                  return triggerNode.parentNode || document.body;
                }"
              v-decorator="['datacenter1', decoratorOptions.datacenter1]"
              placeholder="请选择数据中心"
            >
              <a-select-option
                v-for="d in targetDatacenterList"
                :key="d.id"
                :value="d.id"
              >
                {{ d.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <!-- <a-col :span="4">
          <a-form-item>
            <a-select
              :getPopupContainer="
                triggerNode => {
                  return triggerNode.parentNode || document.body;
                }"
              :disabled="!form.getFieldValue('datacenter1')"
              placeholder="请选择服务器"
              v-decorator="['resource1', decoratorOptions.resource1]"
            >
              <a-select-option
                v-for="d in targetServerResourceList"
                :key="d.id"
                :value="d.id"
              >
                {{ d.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col> -->
      </a-row>

      <a-button
        style="margin: 15px 0 40px 4%; padding: 0 45px"
        type="primary"
        @click="forecastEffect"
      >
        代价预测
      </a-button>
    </a-form>
    <h3>迁移代价信息</h3>
    <a-form v-if="resultDetail && resultDetail.length">
      <a-row :gutter="14">
        <a-col :span="6">
          <a-form-item
            label="迁移代价总分"
            :labelCol="{ span: 13 }"
            :wrapperCol="{ span: 11 }"
          >
            <span class="ant-form-text">{{ totalScore + " 分" }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-for="d in resultDetail" :key="d.factorId" :gutter="14">
        <a-col :span="6">
          <a-form-item
            :label="d.factorName"
            :labelCol="{ span: 13 }"
            :wrapperCol="{ span: 11 }"
          >
            <span class="ant-form-text">{{ d.score + " 分" }}</span>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template v-else> 暂无相关信息 </template>
  </a-card>
</template>

<script>
import { gPostAction } from "@/api/manage";

export default {
  name: "Display",
  data() {
    return {
      // form
      form: this.$form.createForm(this),
      resultDetail: [],
      datacenterList: [],
      targetDatacenterList: [],
      cloudResourceList: [],
      appList: [],
      targetServerResourceList: [],
      decoratorOptions: {
        datacenter: {
          rules: [{ required: true, message: "请选择数据中心" }],
          getValueFromEvent: (e) => {
            this.loadCloudResource(e);
            return e;
          },
        },
        datacenter1: {
          rules: [{ required: true, message: "请选择数据中心" }],
          // getValueFromEvent: e => {
          //   this.loadServerResource(e)
          //   return e
          // },
        },
        resource: {
          rules: [{ required: true, message: "请选择云平台资源" }],
          getValueFromEvent: (e) => {
            this.loadAppList(e);
            return e;
          },
        },
        resource1: {
          rules: [{ required: true, message: "请选择服务器" }],
        },
        app: {
          rules: [{ required: true, message: "请选择应用" }],
        },
      },
      totalScore: 0,
    };
  },
  mounted() {
    this.resultDetail = [];
    this.loadDatacenter();
  },
  methods: {
    loadDatacenter() {
      const postData = {
        pageSize: 99,
        title: "离线业务多数据中心迁移-离线业务异步迁移代价-代价展示-异步迁移代价结果展示",
        content: "查看异步迁移代价计算结果展示页面"
      };

      gPostAction("/asset/pageDatacenter", postData).then((res) => {
        if (res.success) {
          this.datacenterList = res.data.list;
          this.targetDatacenterList = res.data.list;
        }
      });
    },
    loadCloudResource(id) {
      this.form.setFieldsValue({
        datacenter1: undefined,
        resource1: undefined,
      });
      let list = [];
      this.datacenterList.forEach((item) => {
        if (item.id !== id) {
          list.push(item);
        }
      });
      this.targetDatacenterList = list;

      const postData = {
        datacenterId: id,
        pageSize: 99,
      };

      gPostAction("/cloud_resource/page", postData).then((res) => {
        if (res.success) {
          this.cloudResourceList = res.data.list;
          this.form.setFieldsValue({
            resource: undefined,
            app: undefined,
          });
        }
      });
    },
    loadServerResource(id) {
      const postData = {
        datacenterId: id,
        pageSize: 99
      }

      this.targetServerResourceList = []
      gPostAction('/asset/pageNode', postData).then((res) => {
        if (res.success) {
          this.targetServerResourceList = res.data.list
          this.form.setFieldsValue({
            resource1: undefined,
          })
        }
      })
    },
    loadAppList(id) {
      const postData = {
        cloudResourceId: id,
        pageSize: 99,
      };

      gPostAction("/app/page", postData).then((res) => {
        if (res.success) {
          this.appList = res.data.list;
          this.form.setFieldsValue({
            app: undefined,
          });
        }
      });
    },
    forecastEffect() {
      this.form.validateFields((error, values) => {
        if (!error) {
          const postData = {
            resourceId: this.form.getFieldValue("app"),
            datacenterId: this.form.getFieldValue("datacenter1"),
            modelType: "COST",
          };

          gPostAction("/model/detailModelScore", postData).then((res) => {
            if (res.success) {
              this.resultDetail = res.scores;
              this.totalScore = res.totalScore;
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.scheduling-title {
  margin-bottom: 26px;
  color: #000000;
  font-weight: bolder;
}
</style>
